<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue模板页</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<style type="text/css">
		.cover {
			width: 100%;
			height: 70%;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}
		.card {
			width: 30%;
			border: 1px solid #eee;
			border-radius: 10px;
			text-align: center;
			padding-bottom: 10px;
			background-color: #fff;
			margin: 10px;
			height: 200px;

		}
		.row
		.container {
			width: 80%;
			margin: 0 auto;
			background-color:#5c6bc0;
			position: relative;
			top: 80px;

		}
		.card {
			display: flex;
			float: left;
			background-color:#9f9fed;
			box-shadow:0 0 1em #7b1fa2;
			margin-left: 30px;
		}
		.left{
			width: 60%;
			height: 100%;
			box-shadow:0 0 1em #7b1fa2;
		}
		.right{
			width: 40%;
			text-align: left;
			text-indent: 2em;
			float: left;
			box-shadow:0 0 1em #7b1fa2;
		}
    #test{
		background-color:#9f9fed;
		height: 30px;
		width: 80px;
		border-radius: 10px;
		border: none;
		outline: none;
		box-shadow: 0 0 1em #7b1fa2;
	}

	</style>


</head>

<body>


<div class="container">
	<div class="row" id="app">
		<p class="title"><button type="button" @click="getData()" id="test">点我</button><strong>刘恋</strong></p>

		<hr>
		<div class="card"  v-for="(item,index) in topics" :key="index">
			<div class="left"><img :src="item.avatar" class="cover"></div>
			<div class="right">{{item.nickname}}</div>
		</div>
	</div>
</div>


<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			topics:[]
		},
		created: function() {

		},
		//方法
		methods:{
			getData(){
				var _this = this;
				//接口地址
				axios.get('http://localhost:8888/users')
				//回调函数
						.then(function(response) {
							console.log(response)
							_this.topics = response.data
						})
			}
		},
		//计算
		computed:{

		}
	})
</script>
</body>
</html>